<template>
	<div>
		<el-form :inline="true">
			<el-form-item label="角色id">
				<el-input v-model="searchMap.role_id" placeholder="" />
			</el-form-item>
			<el-button type="primary" @click="fetchData()">查询</el-button>
			<el-button type="primary" @click="handleEdit('')">新增</el-button>
		</el-form>

		<!--表格组件-->
		<el-table :data="list" style="width: 100%">
			<!--prop 后端返回的json数据的字段名-->
			<el-table-column prop="role_id" label="角色id">
			</el-table-column>
			<el-table-column prop="role_name" label="角色名">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleEdit(scope.row.role_id)" type="text" size="small">修改权限</el-button>
					<el-button @click="handleDelete(scope.row.role_id)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10, 20, 30, 100]" :page-size="10"
			layout="total, sizes, prev, pager, next, jumper" :total="count">
		</el-pagination>
		<el-dialog title="修改权限" :visible.sync="dialogFormVisible">
			<el-checkbox-group v-model="authidList">
				<el-checkbox @change="val => changeAuthority(val, authority.auId)" v-for="authority in allAuthorityList"
					:label="authority.auName" :key="authority.auId">
					{{ authority.auName }}
				</el-checkbox>
			</el-checkbox-group>
		</el-dialog>
	</div>
</template>

<script>
import RoleApi from "@/api/apiLiu/Role_request"
export default {
	data() {
		return {
			list: [],
			searchMap: {
				role_id: null,
				role_name: null,
				pageNum: 1,
				pageSize: 7,
			},
			count: 20,
			pojo: {
				role_id: null,
				role_name: null,
			},
			dialogFormVisible: false,
			dialogFormVisibleTwo: false,
			id: '',
			allAuthorityList: [],
			authorityList: [],
			authidList: []
		}
	},
	created() {
		//在创建vue实例后触发初始化钩子函数
		this.fetchData();
		this.fetchallAuthorityList();
	},
	methods: {
		fetchData() {
			//编写一个方法请求后端的接口，把返回的数据赋值list
			RoleApi.selectList(this.searchMap).then(response => {
				//  //把返回的结果赋值模型
				this.list = response.data.data
				this.count = response.data.count
			})
		},
		fetchauthorityList(role_id) {
			RoleApi.authorityList(role_id).then(response => {
				this.authorityList = response.data.data
				this.authidList = [];
				for (var i = 0; i < this.authorityList.length; i++) {
					// this.allAuthorityList[this.authorityList[i].auId - 1].auchecked = false
					this.authidList.push(this.authorityList[i].auName)
				}
			})
		},
		fetchallAuthorityList() {
			RoleApi.allAuthorityList().then(response => {
				this.allAuthorityList = response.data.data
				for (var a = 0; a < this.allAuthorityList.length; a++) {
					this.$set(this.allAuthorityList[a], "auchecked", true)
				}
				console.log(this.allAuthorityList);
			})
		},
		//当分页大小产生变化的时候调用该方法
		sizeData(size) {
			this.searchMap.pageSize = size
			this.fetchData()
		},
		pageData(page) {
			this.searchMap.pageNum = page
			this.fetchData()
		},
		//新增和修改使用同一个函数打开弹窗，区别是新增没有id
		handleEdit(id) {
			this.id = id
			//打开弹窗
			this.dialogFormVisible = true
			if (id !== '') {
				//根据id查询数据绑定到模型上面
				this.fetchauthorityList(id)
			} else {
				this.pojo = {
					role_id: null,
					role_name: null,
				} //清空数据
			}
		},
		//新增和修改保存数据的方法
		handleSave() {
			if (this.id === null || this.id === '') {
				RoleApi.insert(this.pojo).then(reponse => {
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false
				})
			} else {
				RoleApi.insertOrUpdate(this.pojo).then(reponse => {
					//新增或者修改成功
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false

				})
			}
		},
		handleDelete(id) {
			this.$confirm('您确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				RoleApi.deleteByRole_id(id).then(reponse => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.fetchData()
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		changeAuthority(val, id) {
			//修改权限
			if (val) {
				//添加权限
				console.log("添加权限" + id);//this.id
				RoleApi.insertau({ role_id: this.id, au_id: id })
				this.$message({ type: 'success', message: '添加成功!' });
			} else {
				//删除权限
				console.log("删除权限" + id);
				RoleApi.deleteau({ role_id: this.id, au_id: id })
				this.$message({ type: 'success', message: '删除成功!' });
			}
		},
	}
}

</script>
